import React, { useCallback, useState, useEffect } from "react";
import { toopTipStyle } from "@/utils/echarts";
import * as cn from "classnames";
import * as echarts from "echarts";

interface DataProps {
  name: string;
  value: number;
}

interface Props {
  idName?: string;
  data?: Array<DataProps>;
  propStyles?: any;
  style?: any;
  title?: string;
  className?: string;
}

let timer: any = null;
let isObserve = false;

const LEGEND_COLOR_INNER = [
  "#4FADE1",
  "#4464C8",
  "#29AE8E",
  "#ABB8C8",
  "#FDC071",
  "#8DB198",
  "#33427E",
  "#A1654C",
  "#E96946",
  "#988DB1",
  "#97B425",
  "#864CA1",
  "#5182CE",
  "#903434",
  "#7F8C9D",
  "#F69173",
  "#76CCD4",
  "#EB9C3D",
];

const data = [
  {
    name: "智能网联汽车",
    value: 24.58,
    children: [
      {
        name: "语音交互",
        value: 4.83,
      },
      {
        name: "智能中控",
        value: 6.07,
      },
      {
        name: "芯片供应商",
        value: 2.38,
      },
      {
        name: "ADAS算法",
        value: 5.02,
      },
      {
        name: "高精地图",
        value: 1.0,
      },
      {
        name: "传感器供应商",
        value: 4.1,
      },
    ],
  },
  {
    name: "无人驾驶",
    value: 8.36,
    children: [
      {
        name: "上游",
        value: 6.02,
      },
      {
        name: "下游",
        value: 2.34,
      },
    ],
  },
  {
    name: "汽车电器系统",
    value: 4.68,
    children: [
      {
        name: "蓄电池",
        value: 2.34,
      },
      {
        name: "电池设备",
        value: 2.34,
      },
    ],
  },
  {
    name: "指纹识别",
    value: 2.34,
    children: [
      {
        name: "上游",
        value: 2.34,
      },
    ],
  },
  {
    name: "其他产业标签",
    value: 27.17,
  },
];

const TreeMap = (props: Props) => {
  const { idName, className, propStyles, style, title } = props;

  function getLevelOption() {
    return [
      {
        itemStyle: {
          borderColor: "#777",
          borderWidth: 0,
          gapWidth: 1,
        },
        upperLabel: {
          show: false,
        },
      },
      //   {
      //     itemStyle: {
      //       borderColor: "inherit",
      //     //   borderWidth: 0,
      //       gapWidth: 1,
      //     },
      //     // emphasis: {
      //     //   itemStyle: {
      //     //     borderColor: "#ddd",
      //     //   },
      //     // },
      //   },
      {
        // colorSaturation: [0.35, 0.5],
        itemStyle: {
          borderWidth: 0,
          gapWidth: 1,
          borderColorSaturation: 0.6,
        },
      },
    ];
  }

  const getOptions = () => {
    let options = {
      //   color: LEGEND_COLOR_INNER,
      tooltip: {
        ...toopTipStyle(),
        trigger: undefined,
      },
      series: [
        {
          type: "treemap",
          data,
          upperLabel: {
            show: true,
            height: 30,
            // backgroundColor: "inherit",
            offset: [40, 0],
          },
          itemStyle: {
            borderColor: "#fff",
          },
          levels: getLevelOption(),
          nodeClick: false,
          width: "100%",
          height: "100%",
          roam: false,
          visibleMin: 50,
          breadcrumb: {
            show: false,
          },
          //   color: LEGEND_COLOR_INNER,
        },
      ],
    };
    return options;
  };

  const handleGenLine = () => {
    const dom = document.getElementById(idName);
    const myChart = echarts.init(dom);
    dom?.removeAttribute("_echarts_instance_");
    myChart.setOption(getOptions());
    myChart.on("click", "series", (params) => {
      console.log(params);
    });
  };

  // 窗口大小改变
  const handleChangeSize = () => {
    if (!isObserve) return;
    setTimeout(() => {
      const dom = document.getElementById(idName);
      if (className) {
        const dom = document.getElementsByClassName(className);
        Array.from(dom).map((d) => {
          d?.removeAttribute("_echarts_instance_");
        });
        handleGenLine();
        return;
      }
      dom?.removeAttribute("_echarts_instance_");
      handleGenLine();
    }, 100);
  };

  useEffect(() => {
    if (data?.length > 0) {
      handleGenLine();
      window.addEventListener("resize", handleChangeSize);
      return () => {
        window.removeEventListener("resize", handleChangeSize);
      };
    }
  }, [JSON.stringify(data), idName]);

  return (
    <div style={style}>
      <div
        id={idName}
        className={className}
        style={
          propStyles
            ? propStyles
            : { height: title ? "calc(100% - 20px)" : "100%", width: "100%" }
        }
      ></div>
    </div>
  );
};

export default TreeMap;
